<template>
  <div class="companies-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">公司管理</h1>
          <p class="page-subtitle">管理合作企业信息，维护公司档案</p>
        </div>
        <div class="header-actions">
          <ThemeToggle />
          <el-button type="primary" @click="handleCreate" :icon="Plus">
            添加公司
          </el-button>
        </div>
      </div>
    </div>

    <!-- 页面内容 -->
    <div class="page-content">
      <!-- 搜索区域 -->
      <div class="search-section">
        <el-card class="search-card">
          <template #header>
            <div class="search-header">
              <el-icon class="search-icon"><Search /></el-icon>
              <span>筛选条件</span>
            </div>
          </template>
          <div class="search-form">
            <el-form :model="searchForm" inline>
              <el-form-item label="搜索">
                <el-input
                  v-model="searchForm.search"
                  placeholder="请输入公司名称、行业、地址"
                  clearable
                  class="search-input"
                  :prefix-icon="Search"
                />
              </el-form-item>
              <el-form-item label="公司类型">
                <el-select
                  v-model="searchForm.company_type"
                  placeholder="请选择"
                  clearable
                  class="search-select"
                >
                  <el-option label="初创公司" value="startup" />
                  <el-option label="中小企业" value="sme" />
                  <el-option label="大型企业" value="large" />
                  <el-option label="跨国公司" value="multinational" />
                  <el-option label="政府机构" value="government" />
                  <el-option label="非营利组织" value="ngo" />
                </el-select>
              </el-form-item>
              <el-form-item label="公司规模">
                <el-select
                  v-model="searchForm.company_size"
                  placeholder="请选择"
                  clearable
                  class="search-select"
                >
                  <el-option label="1-10人" value="1-10" />
                  <el-option label="11-50人" value="11-50" />
                  <el-option label="51-200人" value="51-200" />
                  <el-option label="201-500人" value="201-500" />
                  <el-option label="501-1000人" value="501-1000" />
                  <el-option label="1000人以上" value="1000+" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch" :icon="Search">
                  搜索
                </el-button>
                <el-button @click="handleReset" :icon="RefreshLeft">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>

      <!-- 公司列表 -->
      <div class="table-section">
        <el-card class="table-card">
          <template #header>
            <div class="table-header">
              <el-icon class="table-icon"><OfficeBuilding /></el-icon>
              <span>公司列表</span>
              <div class="table-actions">
                <el-button size="small" @click="fetchCompanyList" :icon="Refresh">
                  刷新
                </el-button>
              </div>
            </div>
          </template>
          <div class="table-container">
            <el-table
              :data="companyList"
              v-loading="loading"
              stripe
              class="company-table"
            >
              <el-table-column prop="name" label="公司名称" min-width="150" />
              <el-table-column label="公司类型" width="120">
                <template #default="{ row }">
                  <el-tag :type="getCompanyTypeTagType(row.company_type)" size="small">
                    {{ getCompanyTypeText(row.company_type) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="公司规模" width="120">
                <template #default="{ row }">
                  <el-tag type="info" size="small">
                    {{ getCompanySizeText(row.company_size) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="industry" label="所属行业" width="120" />
              <el-table-column prop="address" label="公司地址" min-width="200" />
              <el-table-column prop="contact_person" label="联系人" width="100" />
              <el-table-column prop="contact_phone" label="联系电话" width="120" />
              <el-table-column prop="created_at" label="创建时间" width="160">
                <template #default="{ row }">
                  {{ formatDate(row.created_at) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" fixed="right">
                <template #default="{ row }">
                  <el-button
                    size="small"
                    type="primary"
                    link
                    @click="handleDetail(row)"
                    :icon="View"
                  >
                    查看
                  </el-button>
                  <el-button
                    size="small"
                    type="warning"
                    link
                    @click="handleEdit(row)"
                    :icon="Edit"
                  >
                    编辑
                  </el-button>
                  <el-button
                    size="small"
                    type="danger"
                    link
                    @click="handleDelete(row)"
                    :icon="Delete"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页 -->
          <div class="pagination-wrapper">
            <el-pagination
              v-model:current-page="pagination.page"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 公司表单对话框 -->
    <el-dialog
      v-model="formDialogVisible"
      :title="isEdit ? '编辑公司' : '添加公司'"
      width="800px"
      @close="resetForm"
    >
      <el-form
        :model="companyForm"
        :rules="companyRules"
        ref="companyFormRef"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公司名称" prop="name">
              <el-input v-model="companyForm.name" placeholder="请输入公司名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="industry">
              <el-input v-model="companyForm.industry" placeholder="请输入所属行业" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公司类型" prop="company_type">
              <el-select v-model="companyForm.company_type" placeholder="请选择公司类型" style="width: 100%">
                <el-option label="初创公司" value="startup" />
                <el-option label="中小企业" value="sme" />
                <el-option label="大型企业" value="large" />
                <el-option label="跨国公司" value="multinational" />
                <el-option label="政府机构" value="government" />
                <el-option label="非营利组织" value="ngo" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司规模" prop="company_size">
              <el-select v-model="companyForm.company_size" placeholder="请选择公司规模" style="width: 100%">
                <el-option label="1-10人" value="1-10" />
                <el-option label="11-50人" value="11-50" />
                <el-option label="51-200人" value="51-200" />
                <el-option label="201-500人" value="201-500" />
                <el-option label="501-1000人" value="501-1000" />
                <el-option label="1000人以上" value="1000+" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="公司网站">
          <el-input v-model="companyForm.website" placeholder="请输入公司网站" />
        </el-form-item>

        <el-form-item label="公司地址" prop="address">
          <el-input v-model="companyForm.address" placeholder="请输入公司地址" />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人">
              <el-input v-model="companyForm.contact_person" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model="companyForm.contact_phone" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="联系邮箱">
          <el-input v-model="companyForm.contact_email" placeholder="请输入联系邮箱" />
        </el-form-item>

        <el-form-item label="公司简介">
          <el-input
            v-model="companyForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入公司简介"
          />
        </el-form-item>

        <el-form-item label="公司Logo">
          <el-upload
            ref="uploadRef"
            :auto-upload="false"
            :limit="1"
            accept="image/*"
            :on-change="handleLogoChange"
            list-type="picture-card"
          >
            <el-icon><Plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                只能上传图片文件，且不超过 2MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="formDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitting">
          {{ isEdit ? '更新' : '创建' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 公司详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="公司详情"
      width="700px"
    >
      <div class="company-detail" v-if="selectedCompany">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="公司名称">
            {{ selectedCompany.name }}
          </el-descriptions-item>
          <el-descriptions-item label="所属行业">
            {{ selectedCompany.industry }}
          </el-descriptions-item>
          <el-descriptions-item label="公司类型">
            {{ getCompanyTypeText(selectedCompany.company_type) }}
          </el-descriptions-item>
          <el-descriptions-item label="公司规模">
            {{ getCompanySizeText(selectedCompany.company_size) }}
          </el-descriptions-item>
          <el-descriptions-item label="公司网站" span="2" v-if="selectedCompany.website">
            <el-link :href="selectedCompany.website" target="_blank" type="primary">
              {{ selectedCompany.website }}
            </el-link>
          </el-descriptions-item>
          <el-descriptions-item label="公司地址" span="2">
            {{ selectedCompany.address }}
          </el-descriptions-item>
          <el-descriptions-item label="联系人">
            {{ selectedCompany.contact_person || '未填写' }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">
            {{ selectedCompany.contact_phone || '未填写' }}
          </el-descriptions-item>
          <el-descriptions-item label="联系邮箱" span="2">
            {{ selectedCompany.contact_email || '未填写' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" span="2">
            {{ formatDate(selectedCompany.created_at) }}
          </el-descriptions-item>
        </el-descriptions>

        <div class="company-description" v-if="selectedCompany.description">
          <h4>公司简介</h4>
          <p>{{ selectedCompany.description }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus, Search, View, Edit, Delete, Refresh, RefreshLeft,
  OfficeBuilding
} from '@element-plus/icons-vue'
import { companyApi } from '@/api/jobs'
import ThemeToggle from '@/components/ThemeToggle.vue'
import type { Company } from '@/types'

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const companyList = ref<Company[]>([])
const selectedCompany = ref<Company | null>(null)
const formDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const isEdit = ref(false)
const companyFormRef = ref()
const uploadRef = ref()

// 搜索表单
const searchForm = reactive({
  search: '',
  company_type: '',
  company_size: ''
})

// 分页
const pagination = reactive({
  page: 1,
  pageSize: 20,
  total: 0
})

// 公司表单
const companyForm = reactive({
  id: null as number | null,
  name: '',
  company_type: '',
  company_size: '',
  industry: '',
  website: '',
  description: '',
  address: '',
  contact_person: '',
  contact_phone: '',
  contact_email: '',
  logo: null as File | null
})

const companyRules = {
  name: [
    { required: true, message: '请输入公司名称', trigger: 'blur' }
  ],
  company_type: [
    { required: true, message: '请选择公司类型', trigger: 'change' }
  ],
  company_size: [
    { required: true, message: '请选择公司规模', trigger: 'change' }
  ],
  industry: [
    { required: true, message: '请输入所属行业', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入公司地址', trigger: 'blur' }
  ]
}

// 方法
const fetchCompanyList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      page_size: pagination.pageSize,
      ...searchForm
    }

    const response = await companyApi.getCompanyList(params)
    companyList.value = response.data.results || []
    pagination.total = response.data.count || 0
  } catch (error) {
    console.error('获取公司列表失败:', error)
    ElMessage.error('获取公司列表失败')
    companyList.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.page = 1
  fetchCompanyList()
}

const handleReset = () => {
  Object.keys(searchForm).forEach(key => {
    (searchForm as any)[key] = ''
  })
  handleSearch()
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  fetchCompanyList()
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
  fetchCompanyList()
}

const handleCreate = () => {
  isEdit.value = false
  resetForm()
  formDialogVisible.value = true
}

const handleEdit = (company: Company) => {
  isEdit.value = true
  selectedCompany.value = company

  // 填充表单数据
  Object.keys(companyForm).forEach(key => {
    if (key !== 'logo' && company[key as keyof Company] !== undefined) {
      (companyForm as any)[key] = company[key as keyof Company]
    }
  })

  formDialogVisible.value = true
}

const handleDetail = (company: Company) => {
  selectedCompany.value = company
  detailDialogVisible.value = true
}

const handleDelete = async (company: Company) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除公司"${company.name}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    await companyApi.deleteCompany(company.id)
    ElMessage.success('删除成功')
    fetchCompanyList()
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('删除公司失败:', error)
      ElMessage.error('删除公司失败')
    }
  }
}

const handleLogoChange = (file: any) => {
  companyForm.logo = file.raw
}

const resetForm = () => {
  Object.keys(companyForm).forEach(key => {
    if (key === 'id') {
      (companyForm as any)[key] = null
    } else if (key === 'logo') {
      (companyForm as any)[key] = null
    } else {
      (companyForm as any)[key] = ''
    }
  })

  if (uploadRef.value) {
    uploadRef.value.clearFiles()
  }
}

const submitForm = async () => {
  if (!companyFormRef.value) return

  try {
    await companyFormRef.value.validate()

    submitting.value = true

    const formData = new FormData()
    Object.keys(companyForm).forEach(key => {
      if (key !== 'id' && key !== 'logo' && companyForm[key as keyof typeof companyForm]) {
        formData.append(key, companyForm[key as keyof typeof companyForm] as string)
      }
    })

    if (companyForm.logo) {
      formData.append('logo', companyForm.logo)
    }

    if (isEdit.value && companyForm.id) {
      await companyApi.updateCompany(companyForm.id, formData)
      ElMessage.success('公司更新成功')
    } else {
      await companyApi.createCompany(formData)
      ElMessage.success('公司创建成功')
    }

    formDialogVisible.value = false
    fetchCompanyList()

  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败')
  } finally {
    submitting.value = false
  }
}

// 辅助方法
const getCompanyTypeText = (type: string) => {
  const map: Record<string, string> = {
    startup: '初创公司',
    sme: '中小企业',
    large: '大型企业',
    multinational: '跨国公司',
    government: '政府机构',
    ngo: '非营利组织'
  }
  return map[type] || type
}

const getCompanyTypeTagType = (type: string) => {
  const map: Record<string, string> = {
    startup: 'warning',
    sme: 'primary',
    large: 'success',
    multinational: 'danger',
    government: 'info',
    ngo: 'warning'
  }
  return map[type] || 'info'
}

const getCompanySizeText = (size: string) => {
  const map: Record<string, string> = {
    '1-10': '1-10人',
    '11-50': '11-50人',
    '51-200': '51-200人',
    '201-500': '201-500人',
    '501-1000': '501-1000人',
    '1000+': '1000人以上'
  }
  return map[size] || size
}

const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 生命周期
onMounted(() => {
  fetchCompanyList()
})
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

/* CSS变量定义 - 支持深色和浅色模式 */
.companies-container {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --border-color: #e2e8f0;
  --border-color-light: #f1f5f9;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

  min-height: 100vh;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

/* 深色模式变量 - 使用统一的 #2c2f3b 主色调 */
.dark .companies-container {
  --bg-primary: #242732;
  --bg-secondary: #2c2f3b;
  --bg-tertiary: #363a4b;
  --border-color: #4a4e5f;
  --border-color-light: #525670;
  --text-primary: #ffffff;
  --text-secondary: #e5e5e5;
  --text-muted: #b3b3b3;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}

/* 页面头部样式 */
.page-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: 24px 32px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px 0;
  line-height: 1.2;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  transition: color 0.3s ease;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 页面内容样式 */
.page-content {
  flex: 1;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 24px 32px 32px;
  transition: all 0.3s ease;
}

/* 搜索区域样式 */
.search-section {
  margin-bottom: 24px;
  animation: slideInDown 0.6s ease-out;
}

.search-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.search-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.search-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
}

.search-icon {
  color: #3b82f6;
  font-size: 18px;
}

.search-form {
  padding: 0;
}

.search-input {
  width: 280px;
  transition: all 0.3s ease;
}

.search-input:focus-within {
  transform: scale(1.02);
}

.search-select {
  width: 160px;
  transition: all 0.3s ease;
}

.search-select:focus-within {
  transform: scale(1.02);
}

/* 表格区域样式 */
.table-section {
  animation: slideInUp 0.6s ease-out;
}

.table-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.table-card:hover {
  box-shadow: var(--shadow-lg);
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--text-primary);
}

.table-header .el-icon {
  color: #f59e0b;
  font-size: 18px;
  margin-right: 8px;
}

.table-actions {
  display: flex;
  gap: 8px;
}

.table-container {
  overflow: hidden;
  position: relative;
}

.company-table {
  width: 100%;
  font-size: 14px;
  background: transparent;
}

/* 动画效果 */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
}

:deep(.el-table__header-wrapper) {
  border-radius: 0;
  background: var(--bg-tertiary);
}

:deep(.el-table th) {
  border-bottom: 2px solid var(--border-color);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

:deep(.el-table th.el-table__cell) {
  background: var(--bg-tertiary) !important;
}

:deep(.el-table td) {
  border-bottom: 1px solid var(--border-color-light);
  padding: 12px 8px;
  background: transparent;
  color: var(--text-primary);
  transition: all 0.3s ease;
}

:deep(.el-table__row) {
  background: transparent;
  transition: all 0.3s ease;
}

:deep(.el-table__row:hover) {
  background-color: var(--bg-tertiary) !important;
  transform: scale(1.01);
  box-shadow: var(--shadow-sm);
}

:deep(.el-table__row--striped) {
  background: rgba(var(--border-color-light), 0.3) !important;
}

:deep(.el-table__row--striped:hover) {
  background: var(--bg-tertiary) !important;
}

/* 按钮样式优化 */
:deep(.el-button--small) {
  padding: 8px 16px;
  font-size: 12px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
}

:deep(.el-button--small:hover) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

:deep(.el-button--primary.is-link) {
  color: #3b82f6;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.2);
}

:deep(.el-button--warning.is-link) {
  color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.2);
}

:deep(.el-button--danger.is-link) {
  color: #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* 标签样式优化 */
:deep(.el-tag--small) {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  font-weight: 500;
  border: none;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

:deep(.el-tag--primary) {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
}

:deep(.el-tag--success) {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

:deep(.el-tag--warning) {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
}

:deep(.el-tag--danger) {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

:deep(.el-tag--info) {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: white;
}

/* 分页样式优化 */
.pagination-wrapper {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color-light);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

:deep(.el-pagination) {
  font-weight: 500;
  --el-pagination-bg-color: var(--bg-secondary);
  --el-pagination-text-color: var(--text-primary);
  --el-pagination-border-radius: 8px;
}

:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

:deep(.el-pagination .btn-next:hover),
:deep(.el-pagination .btn-prev:hover) {
  background: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

:deep(.el-pagination .el-pager li) {
  border-radius: 8px;
  margin: 0 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

:deep(.el-pagination .el-pager li:hover) {
  background: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

:deep(.el-pagination .el-pager li.is-active) {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
}

:deep(.el-dialog__header) {
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  padding: 20px 24px;
}

:deep(.el-dialog__title) {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 18px;
}

:deep(.el-dialog__body) {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 24px;
}

:deep(.el-dialog__footer) {
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-color);
  padding: 16px 24px;
}

/* 表单样式优化 */
:deep(.el-form-item__label) {
  color: var(--text-primary);
  font-weight: 500;
}

:deep(.el-input),
:deep(.el-select),
:deep(.el-textarea) {
  --el-input-bg-color: var(--bg-secondary);
  --el-input-border-color: var(--border-color);
  --el-input-text-color: var(--text-primary);
  --el-input-placeholder-color: var(--text-muted);
}

:deep(.el-input__wrapper) {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-content {
    padding: 20px 24px 24px;
  }

  .header-content {
    padding: 0 24px;
  }

  .page-title {
    font-size: 24px;
  }

  .search-input {
    width: 240px;
  }

  .search-select {
    width: 140px;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 16px 20px;
  }

  .page-content {
    padding: 16px 20px 20px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .page-title {
    font-size: 22px;
  }

  .search-input,
  .search-select {
    width: 100%;
    min-width: 200px;
  }

  :deep(.el-form--inline .el-form-item) {
    display: block;
    margin-bottom: 16px;
    width: 100%;
  }

  :deep(.el-form--inline .el-form-item:last-child) {
    margin-bottom: 0;
  }

  :deep(.el-form-item__content) {
    width: 100%;
  }

  :deep(.el-table) {
    font-size: 13px;
  }

  :deep(.el-table td),
  :deep(.el-table th) {
    padding: 10px 6px;
  }

  :deep(.el-button--small) {
    padding: 6px 12px;
    font-size: 11px;
  }

  .pagination-wrapper {
    padding: 16px 20px;
  }

  :deep(.el-pagination .el-pagination__sizes),
  :deep(.el-pagination .el-pagination__jump) {
    display: none;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 12px 16px;
  }

  .page-content {
    padding: 12px 16px 16px;
  }

  .page-title {
    font-size: 20px;
  }

  .header-actions {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .header-actions .el-button {
    width: 100%;
    justify-content: center;
  }

  :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto !important;
  }

  :deep(.el-dialog__body) {
    padding: 16px;
  }
}
</style>